<template>
  <div id="aCoursesList" class="bg-fa of" style="margin-top: 100px;margin-bottom: 100px;">
    <!--    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">-->
    <!--      <el-radio-button label="top">top</el-radio-button>-->
    <!--      <el-radio-button label="right">right</el-radio-button>-->
    <!--      <el-radio-button label="bottom">bottom</el-radio-button>-->
    <!--      <el-radio-button label="left">left</el-radio-button>-->
    <!--    </el-radio-group>-->
    <section class="container" style="">
      <el-tabs :tab-position="tabPosition" style="height: 220px;font-size: 16px;height: 500px">
        <el-tab-pane label="个人信息" style="margin-left: 50px">
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="基础信息" name="first">
                <div>
                  <el-form ref="userForm" :label-position="labelPosition" label-width="80px" :model="userInfo">
                    <el-form-item label="头像">
                      <div>
                        <el-upload
                          class="avatar-uploader"
                          :action="uploadFileUrl"
                          :show-file-list="false"
                          accept=".jpg,.png"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                          <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email"
                                  :rules="{ required: true, message: '请输入邮箱', trigger: 'blur' }">
                      <el-input v-if="userInfo.email"
                                style="width: 300px"
                                placeholder="请输入邮箱地址"
                                v-model="userInfo.email"
                                :disabled="true"
                      >
                      </el-input>
                      <el-input v-else
                                style="width: 300px"
                                placeholder="请输入邮箱"
                                v-model="userInfo.email"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname"
                                  :rules="{ required: true, message: '请输入昵称', trigger: 'blur' }">
                      <el-input style="width: 300px" type="text" v-model="userInfo.nickname"
                                placeholder="你的昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age"
                                  :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]">
                      <el-input-number v-model.number="userInfo.age" controls-position="right" :min="1" :max="100">
                        {{userInfo.age}}
                      </el-input-number>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio-group v-model="userInfo.sex">
                        <el-radio :label="1">女</el-radio>
                        <el-radio :label="2">男</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-button type="primary" plain @click="saveUserInfo">保存</el-button>
                  </el-form>
                </div>
              </el-tab-pane>

            </el-tabs>
          </div>

        </el-tab-pane>

        <el-tab-pane label="修改密码" style="margin-left: 50px">
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="修改密码" name="first">
                <el-form ref="userFormByPassword" :rules="rules" :label-position="labelPosition" label-width="80px"
                         :model="params">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-if="userInfo.email"
                              style="width: 300px"
                              placeholder="userInfo.email"
                              v-model="userInfo.email"
                              :disabled="true">
                    </el-input>
                    <el-input v-else
                              style="width: 300px"
                              placeholder="请输入邮箱"
                              v-model="userInfo.email"
                              :rules="{ required: true, message: '请输入邮箱', trigger: 'blur' }"
                    >
                    </el-input>
                  </el-form-item>

                  <!--验证码-->
                  <el-form-item class="input-prepend restyle" prop="code" label="验证码">
                    <div style="width: 300px;display: block;float: left;position: relative">
                      <el-input type="text" placeholder="验证码" v-model="params.code"/>
                    </div>
                    <div class="btn" style="position:absolute;left: 200px;top: 0px;width: 40%;">
                      <a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none">{{codeTest}}</a>
                    </div>
                  </el-form-item>

                  <el-form-item class="input-prepend restyle" prop="password" label="重置密码"
                                :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                    <div>
                      <el-input type="password" placeholder="设置密码" v-model="params.password"/>
                    </div>
                  </el-form-item>
                  <el-form-item class="input-prepend restyle" prop="checkPass" label="确认密码"
                  >
                    <div>
                      <el-input type="password" placeholder="确认密码" v-model="params.checkPass"/>
                    </div>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="submitUpdatePwd()">提交</el-button>
                    <el-button @click="resetForm('userFormByPassword')">重置</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>

        <el-tab-pane label="我的订单" style="margin-left: 50px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="所有订单" name="first">
              <!--所有订单开始-->
              <div class="project-content" v-for="item in this.orderList">
                <div class="project-item" @click="toCourse(item.courseId)">
                  <div class="item-thumb">
                    <img :src="item.courseCover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.courseTitle}}
                      </div>
                      <div class="order-num">
                        订单编号：{{item.orderNo}}
                      </div>
                      <div class="item-time">
                        {{item.gmtCreate}}
                      </div>
                    </div>
                    <div class="item-bottom">
                      <span class="course-tag tag1">录播课</span>
                      <div class="item-price">实付款：￥{{item.totalFee}}</div>
                      <div class="item-status act" v-if="Number(item.status)==0">未支付</div>
                      <div class="item-status" v-else>已支付</div>
                    </div>
                  </div>
                </div>
              </div>
              <!--所有订单结束-->
            </el-tab-pane>
            <el-tab-pane label="未支付订单" name="second">
              <div class="project-content" v-for="item in this.orderList">
                <div class="project-item" v-if="Number(item.status==0)" @click="toCourse(item.courseId)">
                  <div class="item-thumb">
                    <img :src="item.courseCover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.courseTitle}}
                      </div>
                      <div class="order-num">
                        订单编号：{{item.orderNo}}
                      </div>
                      <div class="item-time">
                        {{item.gmtCreate}}
                      </div>
                    </div>
                    <div class="item-bottom">
                      <span class="course-tag tag1">录播课</span>
                      <div class="item-price">实付款：￥{{item.totalFee}}</div>
                      <div class="item-status act">未支付</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已支付订单" name="third">
              <div class="project-content" v-for="item in this.orderList">
                <div class="project-item" v-if="Number(item.status==1)" @click="toCourse(item.courseId)">
                  <div class="item-thumb">
                    <img :src="item.courseCover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.courseTitle}}
                      </div>
                      <div class="order-num">
                        订单编号：{{item.orderNo}}
                      </div>
                      <div class="item-time">
                        {{item.gmtCreate}}
                      </div>
                    </div>
                    <div class="item-bottom">
                      <span class="course-tag tag1">录播课</span>
                      <div class="item-price">实付款：￥{{item.totalFee}}</div>
                      <div class="item-status">已支付</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>

        <el-tab-pane label="收藏记录" style="margin-left: 50px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="录播课" name="first">
              <!--录播课开始-->
              <div class="project-content" v-for="item in this.collectList">
                <div class="project-item" @click="toCourse(item.id)">
                  <div class="item-thumb">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.title}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--录播课结束-->
            </el-tab-pane>
            <el-tab-pane label="图文" name="second">
              <div class="project-content" v-for="item in this.collectList">
                <div class="project-item" @click="toCourse(item.id)">
                  <div class="item-thumb">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.title}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学习路径" name="third">
              <div class="project-content" v-for="item in this.collectList">
                <div class="project-item" @click="toCourse(item.id)">
                  <div class="item-thumb">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="item-info">
                    <div class="item-top">
                      <div class="item-name">
                        {{item.title}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
  import userApi from "../../api/user";
  import cookie from "js-cookie";
  import register from "../../api/register";
  import order from "../../api/order";
  import course from "../../api/course";

  export default {

    data() {
      //密码校验
      var checkPassword1 = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码不能为空'));
        } else {
          if (this.params.checkPass !== '') {
            this.$refs.userForm.validateField('checkPass');
          }
          callback();
        }
      };
      var checkPassword2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.params.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        tabPosition: 'left',
        activeName: 'first',
        labelPosition: 'left',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        userInfo: {},
        uploadFileUrl: "http://114.55.238.50:8160/eduoss/fileoss",
        rules: {
          password: [
            {validator: checkPassword1, trigger: 'blur', required: true,}
          ],
          checkPass: [
            {validator: checkPassword2, trigger: 'blur', required: true,}
          ],
        },
        params: {
          email: '',
          userId: '',
          // mobile: '',
          code: '',//验证码
          password: '',//密码
          //email: this.userInfo.email,//邮箱
          checkPass: ''//确认密码
        },
        codeTest: '获取验证码',
        sending: true,      //是否发送验证码
        second: 60,        //倒计时间
        realCode: '',
        orderList: {},//订单集合
        collectList:{},//收藏集合
      };
    },
    created() {
      this.getUserInfo();
      this.getOrderList();
      this.getCourseCollectByMemberId();
      //console.log("ddd:"+this.orderList);
    },
    methods: {

      //点击收藏或订单进入课程页面
      toCourse(courseId){
        window.location.href='/course/'+courseId
      },
      //通过用户id获取收藏数据
      getCourseCollectByMemberId(){
        course.getCourseCollectByMemberId()
        .then(resp=>{
          this.collectList = resp.data.data.collectList;
        })
      },

      //通过用户id获取订单数据
      getOrderList() {
        order.getOrderByUserId()
          .then(resp => {
            this.orderList = resp.data.data.orderList;
          })
      },

      //提交修改密码
      submitUpdatePwd() {
        this.params.userId = this.userInfo.id;
        this.params.email = this.userInfo.email;
        console.log("111:" + this.params.userId)
        this.$refs['userFormByPassword'].validate((valid) => {
          if (valid) {
            userApi.updatePwdInfoById(this.params).then(resp => {
              console.log("成功", resp.data.code);
              if (resp.data.code === 20001) {
                this.$message({
                  type: 'error',
                  message: resp.data.message
                })
              } else {
                //提示注册成功
                this.$message({
                  type: 'success',
                  message: "修改成功"
                })
                this.$router.push({path: '/user'})
              }

            })
          }
        })
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      //通过email发送验证码
      getCodeFun() {
        //sending = false
        //this.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
        if (!this.sending)
          return;
        // prop 换成你想监听的prop字段
        this.$refs["userFormByPassword"].validateField('email', (errMsg) => {
          //验证信息通过
          if (!errMsg) {
            //获取邮箱验证码
            register.sendEmail(this.userInfo.email).then(res => {
              this.realCode = res.data.data.code;
              this.sending = false;
              this.timeDown();
            });
          } else {
            this.$message({
              type: 'error',
              message: "邮箱格式错误"
            })
          }
        })
      },

      //验证码计时器
      timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          this.disabled = true;
          if (this.second < 1) {
            clearInterval(result);
            this.sending = true;
            //this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);

      },

      //保存修改的数据信息
      saveUserInfo() {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            userApi.updateUserInfoById(this.userInfo)
              .then(resp => {
                this.$message.success("信息修改成功");
                //先更新一下userInfo
                this.getUserInfo();
                //修改之后将用户信息保存到cookie中
                cookie.set("edu_ucenter", JSON.stringify(this.userInfo));
                //返回到这个页面
                this.$router.push({path: "/user"})
              })
          }
        })
      },

      //根据token获取用户信息
      getUserInfo() {
        userApi.getUserInfo()
          .then(resp => {
            this.userInfo = resp.data.data.userInfo;
          })
      },

      handleAvatarSuccess(data) {
        this.userInfo.avatar = data.data.url;
        //console.log(this.userInfo);
        userApi.uploadAvatar(this.userInfo)
          .then(resp => {
            this.$message.success("头像更换成功");
            cookie.set("edu_ucenter", JSON.stringify(this.userInfo));
            this.$router.push({path: "/user"})
          })
      },
      beforeAvatarUpload(file) {
        //在头像上传之前需要做的判断，如判断文件格式
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
      }
    }
  };
</script>

<style>

  .el-tabs__nav .is-left {
    text-align: center;
    font-size: 16px;
    height: 55px;
  }

  .avatar-uploader .el-upload {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
  }

  /*订单style*/
  .project-content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-item {
    width: 100%;
    height: 100px;
    background: #fff;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }

  .item-thumb img {
    width: 165px;
    height: 100px;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    margin-right: 30px;
  }

  .item-info {
    width: 776px;
    height: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .item-top {
    width: 100%;
    height: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
  }

  .item-name {
    height: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 14px;
  }

  .order-num {
    height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 12px;
    margin-right: 30px;
    margin-left: auto;
  }

  .item-time, .order-num {
    height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 12px;
  }

  .item-bottom {
    width: 100%;
    height: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
  }

  .course-tag {
    padding: 1px 5px;
    margin: 0 10px 0 0;
    color: #fff;
    border-radius: 5px;
  }

  .course-tag.tag1 {
    background: green;
  }

  .item-free, .item-price {
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
  }

  .item-status {
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 14px;
    margin-left: auto;
  }

  .act {
    color: #ff5068;
  }
</style>
